<!DOCTYPE html>
<html>
<head>
    <head/>
    <title>我的预约</title>
    <titleType style="display: none">wdyyList</titleType>
    <%- include('./_global/appendJs') %>
    <style type="text/css">
        #orderUl li{
            background: #fff;
        }
        #orderUl li:first-child{
            margin-top: 0 !important;
        }
        #orderUl .cancelButton{
            border: 1px solid #ccc;
            padding: .5rem;
            border-radius: .2rem;
        }
    </style>
</head>
<body>
<section class="page-wrap page-user">
    <!-- header start -->
    <header class="header-box grey fixed">
        <div class="header-content">
            <div class="left-tool">
                <a class="back" href="javascript:void(0);"><i class="iconfont icon-back"></i></a>
            </div>
            <div class="title">我的预约</div>
        </div>
        <div class="right-tool">
            <a class="tool-a" onclick="toSelfCenter()">返回首页</a>
        </div>
    </header>
    <!-- header end -->

    <!--内容-->
    <div class="plane-box first" id="orderDiv" style="background: #f5f7fc">
        <ul class="default-list" id="orderUl">
        </ul>
    </div>
    <!--内容END-->
</section>
</body>
<script type="text/html" id="orderLiTop">
    <li style="margin-top:.5rem ">
        <div class="item-inner">
            <div class="item-content">
                <span class="user-title">就诊人:</span>
                <span class="user-name orderInfo" name="patientName">张三</span>
            </div>
            <div class="item-after">
                <span class="check orderInfo" name="orderStatus">预约成功</span>
            </div>
        </div>
    </li>
</script>
<script type="text/html"  id="orderLiDown">
    <li>
        <div class="item-inner big-box">
            <div class="item-content">
                <p class="doc"><span class="orderInfo" name="docName">李医生</span><span class="second orderInfo" name="docTitle">普通医师</span></p>
                <p class="doc"><span>就诊医院：</span><span class="second orderInfo" name="hosName">上海第九医院（风湿免疫科）</span></p>
                <p class="doc"><span>门诊费用：</span><span class="second orderInfo" name="visitCost">普通门诊14:00元（支付宝）</span></p>
                <!--      <p class="doc"><span>门诊类型：</span><span class="second orderInfo" name="regType1">普通门诊</span></p> -->
                <p class="doc"><span>就诊时间：</span><span class="second orderInfo" name="scheduleDate">2017-02-28</span></p>
            </div>
            <div class="item-after"><i class="iconfont icon-more"></i></div>
        </div>
    </li>
</script>
<script type="text/html"  id="orderNum">
    <li>
        <div class="item-inner">
            <div class="item-content">
                <span class="user-title">订单编号:</span>
                <span class="user-name orderInfo" name="orderId">13456732</span>

            </div>
            <div class="item-after ">
                <span class="check orderInfo cancelButton" name="orderStatus">取消预约</span>
            </div>
        </div>
    </li>
</script>

<script src="/static/js/gzd/pageUrl.js"></script>
<script src="/quickJs/scripts/swiper/3.4.2/js/swiper.min.js"></script>
<script type="text/javascript">
    /*订单状态*/
    var tb_zy_order_status = {
        "1": "已预约"
        ,"2": "已支付"
        ,"3": "已退号"
        ,"4": "已取号"
        ,"5": "待退费"
    };
    var requestRoot = "/api/gzd/yygh/";

    /**查看详情*/
    function toYydetail(data){
        var info = data;
        StoreCache.setCache("YYGH_MEDICARD", {mediCardId: info["mediCardId"], password: info["password"]});
        StoreCache.setCache("YYGH_ORDERINFO",{orderId: info["orderId"]});
        $.pageSwitch.goToUrl("myOrder","orderDetail","orderId="+info.orderId+"&hosCode="+info.hosCode);
    }
    function cancelOrder(data){
        var params = {
            orderId:data.orderId,
            hosOrgCode:data.hosCode,
            platformUserId:data.platformUserId
        };
        $.QuickRemote.AjaxJson({
            funcName:requestRoot + "cancelReservation"
            ,callback: function(result){
                var message =data.orderStatus=="1"? "取消预约成功！":"退号成功！";
                $.QuickAlert.alertNormal(message,{callback: function(){
                    /**刷新当前页面*/
                    location.reload();

                }});
            },params:params
        });
    }

    var page_wdyy = (function($, page_wdyy) {

        /**加载视图*/
        function initView(){

        }

        /**加载数据*/
        function initData(){
            page_wdyy.initOrderList();
        }

        /**查询预约单列表*/
        function initOrderList() {
            $("#orderUl").remove();
            var orderUl = $("<ul>").attr({"id":"orderUl","class":"default-list"});
            $("#orderDiv").append(orderUl);
            $.QuickRemote.AjaxJson({
                funcName: $.getServiceUrl.getUrl("getOrderRecords")
                ,callback: page_wdyy.getOrderRecordsHandler
            });
        }

        /**解析结果创建预约单列表*/
        function getOrderRecordsHandler(result) {
            var orders = result["orders"];
            if(orders){
                orders.sort(page_wdyy.compare('orderId'));
                page_wdyy.createItems(orders);
            }else{
                $.QuickAlert.alertFail({content:"没有预约信息！"});
                $("#orderDiv").css("display", "none");
            }
        }

        function compare(property){
            return function(a,b){
                var value1 = a[property].stringToDate();
                var value2 = b[property].stringToDate();
                return value2 - value1;
            }
        }

        function createItems(ary){
            var lis = [];
            $.each(ary, function(index, item){
                var orderLiTop = $($("#orderLiTop").html());
                var orderLiDown = $($("#orderLiDown").html());
                var orderNum = $($("#orderNum").html());
                $(orderLiTop).find(".orderInfo").each(function(){
                    if($(this).attr("name")=="orderStatus"){
                        var status = item['orderStatus'];
                        $(this).text(status==''?'':tb_zy_order_status[status]);
                    }else{
                        $(this).text(item[$(this).attr("name")]);
                    }

                });
                $(orderLiDown).find(".orderInfo").each(function(){
                    if($(this).attr("name")=="hosName"){
                        $(this).text(item.hosName+"("+item.depName+")");
                    }else if($(this).attr("name")=="visitCost"){
                        $(this).text(parseInt(item.visitCost).toFixed(2));
                    }else{
                        $(this).text(item[$(this).attr("name")]);
                    }
                });
                $(orderLiDown).find(".item-after").attr("onclick","toYydetail("+JSON.stringify(item)+")");
                $(orderNum).find(".orderInfo").each(function(){
                    if($(this).attr("name")=="orderStatus" ){
                        if(item[$(this).attr("name")]=="1"){
                            $(this).text("取消预约");
                            $(this).attr("onclick","cancelOrder("+JSON.stringify(item)+")");
                            $(this).show();
                        }else if(item[$(this).attr("name")]=="2"){
                            $(this).text("退号");
                            $(this).attr("onclick","cancelOrder("+JSON.stringify(item)+")");
                            $(this).show();
                        }else{
                            $(this).hide();
                        }
                    }else{
                        $(this).text(item[$(this).attr("name")]);
                    }

                });
                lis.push(orderLiTop);
                lis.push(orderLiDown);
                lis.push(orderNum);
            });
            $("#orderUl").append(lis);
        }

        var cfg_def = {
            initData: initData,
            initView: initView,
            initOrderList: initOrderList,
            getOrderRecordsHandler: getOrderRecordsHandler,
            compare: compare,
            createItems: createItems,
        }

        page_wdyy.init = function(cfg){
            $.extend(page_wdyy, cfg_def, cfg);
            page_wdyy.initData();
            page_wdyy.initView();
        }

        return page_wdyy;
    })(jQuery, {});
    

</script>
</html>



